<template>
	<div class="course_info_wrapper">
		<div class="image">
			<el-image :src="courseCover" fit="cover">
				<div class="el-image__placeholder" slot="placeholder">123</div>
			</el-image>
		</div>
		<div class="content">
			<h1>{{ data.title }}</h1>
			<div class="labels">
				<el-tag v-for="(item, index) in courseTypeNames" :key="index">{{ item.name }}</el-tag>
			</div>
			<div class="describe">{{ $cleanHtmlTag(data.content) }}</div>
			<el-row class="attrs" :gutter="16">
				<el-col :sm="24" :md="12" :lg="24">建设单位：{{ data.extFiled2 }}</el-col>
				<el-col :sm="24" :md="12" :lg="24">培训时长：{{ data.sumHours }}小时</el-col>
			</el-row>
			<div class="button">
				<el-button type="primary" round @click="handleStartLearn()">开始学习</el-button>
				<el-button type="warning" plain round @click="handleStartExam()">立即考试</el-button>
				<el-button type="info" plain round @click="handleReturnList()">返回</el-button>
			</div>
		</div>
	</div>
</template>

<script>
import lodash from 'lodash';
import { mapGetters } from 'vuex';
import { getStudyProgress } from '@/api/openApi';
import { queryExamCourseList } from '@/api/exam/testExamCourse';
export default {
	props: {
		data: { type: Object, default: () => {} },
		chapters: { type: Array, default: () => [] }
	},
	data() {
		return {
			learnPropgress: []
		};
	},
	computed: {
		...mapGetters(['token', 'userInfo', 'siteInfo', 'courseLabel']),
		courseId() {
			return this.$route.params.id;
		},
		courseCover() {
			let attach = this.data.sysAttachment;
			if (!!attach && !!attach.httpUrl) {
				return attach.httpUrl.replaceIP();
			} else if (!!this.siteInfo.defaultCourseImg) {
				return this.siteInfo.defaultCourseImg;
			} else {
				return require('@/assets/img/course-cover.jpg');
			}
		},
		courseTypeNames() {
			let labelValue = this.data?.labelValue || '';
			return this.courseLabel?.filter((n) => labelValue.includes(n.id)) || [];
		},
		chapterNodes() {
			let nodes = this.$treeToFlat(this.chapters, 'childList');
			return nodes.filter((n) => n.type === '2').sort((a, b) => a.index - b.index);
		}
	},
	methods: {
		//开始学习
		async handleStartLearn() {
			let path = this.$route.path;
			let params = { courseId: this.courseId, nodes: this.chapterNodes };
			let unfinish = await this.$store.dispatch('getUnlearnChapter', params);
			if (params.nodes.length === 0) {
				this.$message.warning('该课程尚未搭建课程章节，请联系管理员添加！');
			} else if (lodash.isEmpty(unfinish)) {
				this.$router.push({ path, query: { type: 'exam' } });
			} else {
				let drama = unfinish.id;
				this.$router.push({ path, query: { type: 'learn', drama } });
			}
		},

		//开始考试
		async handleStartExam() {
			if (!this.token) {
				let fullPath = this.$route.fullPath;
				this.$router.push({ path: '/login', query: { redirect: fullPath } });
			} else {
				let params = { courseId: this.courseId };
				let unlearnParams = { ...params, nodes: this.chapterNodes };
				let courseExam = await this.$store.dispatch('getCourseExamData', params);
				let unfinish = await this.$store.dispatch('getUnlearnChapter', unlearnParams);
				if (lodash.isEmpty(courseExam)) {
					this.$message.warning('该课程未设置考试，请联系管理员设置考试！');
				} else if (!lodash.isEmpty(unfinish)) {
					this.$alert('该课程还没学习完，请完成后续学习再进行考试', '考试提示', {
						confirmButtonText: '继续学习',
						callback: (action) => {
							if (action === 'confirm') {
								let drama = unfinish.id;
								let path = this.$route.path;
								this.$router.push({ path, query: { type: 'learn', drama } });
							}
						}
					});
				} else {
					this.$bus.$emit('examConfirm', courseExam.examId);
				}
			}
		},

		//返回列表
		handleReturnList() {
			this.$router.back();
		}
	}
};
</script>

<style lang="scss" scoped>
.course_info_wrapper::v-deep {
	display: flex;
	flex-wrap: wrap;
	padding: 10px;
	.image {
		width: 100%;
		margin-bottom: 10px;
		.el-image {
			display: block;
			width: 100%;
			padding-top: 56.25%;
			position: relative;
			img,
			.el-image__error,
			.el-image__placeholder {
				position: absolute;
				top: 0;
				left: 0;
			}
		}
	}
	.content {
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	h1 {
		font-size: 24px;
		line-height: 1.3333;
		margin-bottom: 10px;
	}
	.labels {
		margin-bottom: 10px;
		.el-tag {
			margin-right: 10px;
			&:last-child {
				margin-right: 0;
			}
		}
	}
	.describe {
		color: #909399;
		font-size: 14px;
		line-height: 1.5em;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
	}
	.el-row.attrs {
		flex: 1;
		padding: 10px 0;
		.el-col {
			color: #606266;
			padding: 4px 0;
			font-size: 14px;
		}
	}
	.button {
		display: flex;
		align-items: center;
		.el-button {
			flex: 1;
			font-size: 14px;
		}
	}
}
@media (min-width: 768px) {
	.course_info_wrapper::v-deep {
		padding: 20px;
		.image {
			width: 50%;
			margin-bottom: 0;
		}
		.content {
			width: 50%;
			padding-left: 20px;
			box-sizing: border-box;
		}
		.describe {
			font-size: 16px;
		}
		.el-row.attrs .el-col {
			font-size: 16px;
		}
		.button .el-button {
			flex: none;
			font-size: 18px;
			border-radius: 22px;
		}
	}
}
</style>
